<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>别踩白块</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .start {
            margin: 0 auto;
        }

        .continer {
            width: 400px;
            height: 400px;
            border: 1px solid #335533;
            z-index: 1;
            margin: 0 auto;
        }

        .box_L {
            width: 400px;
            height: 100px;
            border: 1px solid darkgray;
            position: relative;
            top: 0px;
            z-index: 2;
        }

        .box_S {
            width: 98px;
            height: 98px;
            border: 1px solid black;
            float: left;
        }


        .active {
            background: black;
        }

        .box_S span {
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div>
        <span id="start">
            游戏开始
        </span>
        <span id="pause">游戏暂停</span>
    </div>
    <div class="score">
        <span>分数：<span id="show_num">0</span></span>
    </div>
    <div class="continer" id="box_XL">
        <div class="box_L" >
            <div class="box_S">白</div>
            <div class="box_S">白</div>
            <div class="box_S active">黑</div>
            <div class="box_S">白</div>
        </div>
    </div>
</body>
<script>
    var pause = document.getElementById("pause");
    Start_onclick = document.getElementById("start"),
        box_S = document.getElementsByClassName("box_S"),
        show_score = document.getElementById("show_num"),
        box_L = document.getElementsByClassName("box_L"),
        box_l1=document.querySelector("div.box_L");
        box_XL = document.getElementById("box_XL"),
        score = 0,
        speed = 100;
        console.log(window.getComputedStyle(box_l1,null)["top"]);
    function box_S_Onclick() {//点击事件(分数+1;黑色变白)
        console.log(this);

        for (var i = 0; i < box_S.length; i++) {//遍历所有class名为box_s的小块并给小块添加onclick事件
            console.log(this);
            box_S[i].onclick = function () {
                if (this.className.indexOf('active') == -1) {//如果白色小块没有active这个拥有黑色背景的class属性 返回值为-1
                    alert("你输了,重新开一局吧");
                } else {//反之将点击的黑色小块变成只拥有box_S的白色块
                    score += 1;
                    show_score.innerHTML = score;
                    this.className = "box_S";
                };
            }
        }
    }
    function move(){


    }
    
    // id="1"
    // top="0"
    ///
    // top="30"
    // 追加id="2"的第二个L块
    //id="1"的块通过
    // setInterval(function(){
    //if(top==30){
    //      addelement
    //remove top ++
    // }
    //
    //
    // },1000);
    
    console.log(window.getComputedStyle(box_l1,null)["top"]);//当前boxl的top 值





























    // Start_onclick.onclick = function () {

    //     //创建块 并且在大盒子的首部追加带有随机黑色块小盒子的中盒子;
    //     var interval = setInterval(function CreateDiv() {//创建块
    //         var node_div_S_i = Math.floor(Math.random() * 4);
    //         var node_div_L = document.createElement("div");
    //         node_div_L.setAttribute("class", "box_L");
    //         for (i = 0; i < 4; i++) {// i是循环次数||node_div_S_i是随机0-3的数
    //             if (node_div_S_i == i) {
    //                 var node_div_S = document.createElement("div");
    //                 node_div_S.setAttribute("class", "box_S active");
    //                 node_div_L.appendChild(node_div_S);
    //             }
    //             else {
    //                 var node_div_S = document.createElement("div");
    //                 node_div_S.setAttribute("class", "box_S");
    //                 node_div_L.appendChild(node_div_S);
    //             }
    //         }
    //         box_XL.insertBefore(node_div_L, box_XL.childNodes[0]);
    //         console.log(box_XL.insertBefore(node_div_L, box_XL.childNodes[0]));//del
    //         box_S_Onclick();
    //     }, 1000);
    //     pause.onclick = function clear() {
    //         clearInterval(interval);
    //     }
    // }
    box_S_Onclick()
</script>

</html>